<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">
</head>
<body>
<div style="margin:20px 0;"></div>
<table cellpadding="5">
    <tr>
        <td>用户名:</td>
        <td><input id="txtName" ui-config="required:true,tipAfterInput: true,validType:'length[3,10]'"></td>
    </tr>
    <tr>
        <td>邮箱:</td>
        <td><input id="txtEmail" ui-config="required:true,validType:'email'"></td>
    </tr>
    <tr>
        <td>生日:</td>
        <td><input id="txtBirth" ui-config="required:true"></td>
    </tr>
    <tr>
        <td>URL:</td>
        <td><input id="txtUrl" ui-config="validType:'url'"></td>
    </tr>
    <tr>
        <td>电话:</td>
        <td><input id="txtPhone" ui-config="required:true"></td>
    </tr>
    <tr>
        <td>爱好:</td>
        <td>
            <input name="like" id="cb1" type="checkbox" value="1" ui-config="required:true"/><label for="cb1">足球</label>
            <input name="like" id="cb2" type="checkbox" value="2" ui-config="required:true"/><label for="cb2">篮球</label>
        </td>
    </tr>
    <tr>
        <td>单选:</td>
        <td>
            <input name="like1" id="cb3" type="radio" ui-config="required:true"/><label for="cb3">足球</label>
            <input name="like1" id="cb4" type="radio" ui-config="required:true"/><label for="cb4">篮球</label>
            <input name="like1" id="cb5" type="radio" ui-config="required:true"/><label for="cb5">足球</label>
            <input name="like1" id="cb6" type="radio" ui-config="required:true"/><label for="cb6">篮球</label>
        </td>
    </tr>
    <tr>
        <td>下拉:</td>
        <td>
            <select id="sel" value="-1"  ui-config="required:true">
                <option value="-1">请选择</option>
                <option value="1">质量系统</option>
                <option value="2">生产系统</option>
                <option value="3">物资系统</option>
                <option value="4">项目系统</option>
                <option value="5">合同系统</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>备注:</td>
        <td>
            <textarea id="txtRemark" class="ui_validate" ui-config="required:true"></textarea>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btnOK">提交</button>
        </td>
    </tr>
</table>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function () {
        $('#txtName').uiValidate();
        $('#txtBirth').uiDate().uiValidate();
        $('#txtEmail').uiValidate();
        $('#txtUrl').uiValidate();
        $('#txtPhone').uiValidate();
        $('#txtRemark').uiValidate();
        $('#sel').uiCombobox({
            nullValue:'-1'
        });
        $('#btnOK').click(function(){
            alert($('input[name="like"]:checked').length);
        });
    })
</script>
</html>